<template>
<div style="margin: 10px 20px;">
    <div style="display: flex;align-items: center;margin-bottom: 12px;flex-wrap: wrap;">
        <Select 
            v-model="activeModule" 
            style="width:100px"
            >
            <Option :value="0">
                未确认
            </Option>
            <Option :value="1">
                已确认
            </Option>
        </Select>
        <Upload 
            ref="upload"
            :show-upload-list="false"
            :on-success="imgUploadHandleSuccess" 
            :action="actionUrl"
            >
            <Button icon="ios-cloud-upload-outline">
                上传图片
            </Button>
        </Upload>
        <div 
            class="demo-upload-list" 
            v-for="(item, index) in uploadList" 
            :key="index"
            style="margin-left: 10px;"
            >
            <template>
                <img :src="item.base64">
                <div class="demo-upload-list-cover">
                    <Icon 
                        type="ios-eye-outline" 
                        @click.native="handleSelectView(item)" 
                        />
                </div>
            </template>
        </div>
        <!-- 
        <div 
            class="demo-upload-list" 
            v-for="(item, index) in uploadList" 
            :key="index"
            style="margin-left: 10px;"
            >
            <template v-if="item.status === 'finished'">
                <img :src="item.response.base64_data">
                <div class="demo-upload-list-cover">
                    <Icon 
                        type="ios-eye-outline" 
                        @click.native="handleView(item)" 
                        />
                    <Icon 
                        type="ios-trash-outline" 
                        @click.native="handleRemove(item)" 
                        />
                </div>
            </template>
            <template v-else>
                <Progress 
                    v-if="item.showProgress" 
                    :percent="item.percentage" 
                    hide-info 
                    />
            </template>
        </div>
         -->
    </div>
    <section
        id="app"
        style="/* display: grid; *//* grid-template-columns: 15em auto; *//* column-gap: 1em; */"
        >
        <form style="/* display: flex; *//* flex-direction: column; */">
            <p style="margin: 0px 0px 0.5em; display: inline-block;">
                Size:
                <button
                    type="button"
                    @click="maxSize = Math.max(maxSize - 20, 200)"
                    v-text="'-'"
                    />
                <button
                    type="button"
                    title="Reset"
                    @click="maxSize = 480"
                    v-text="'•'"
                    />
                <button
                    type="button"
                    @click="maxSize += 20"
                    v-text="'+'"
                    />
            </p>
            <p style="margin: 0px 0px 0.5em 1em; display: inline-block;">
                Stones:
                <button
                    type="button"
                    title="Reset"
                    @click="signMap = JSON.parse(JSON.stringify(rawSignMap))"
                    v-text="'•'"
                    />
            </p>
            <div style="display: inline-block;">
                <template v-for="(c, i) in checkBoxs">
                    <label
                        style="display: inline-flex; align-items: center; margin-left: 1.5em;"
                        :key="i"
                        >
                        <input
                            type="checkbox"
                            style="marginRight: .5em;"
                            :value="c.stateKey"
                            v-model="checkedNames"
                            >
                        <span
                            style="user-select: none;"
                            v-text="c.text"
                            />
                    </label>
                </template>
            </div>
        </form>
        <div style="margin-top: 15px;">
            <div style="display: inline-block;margin: 0px 15px;">
                <Button 
                    size="small"
                    @click="handleAddLine"
                    >
                    插入
                </Button>第<Input 
                    v-model="addLine"
                    size="small" 
                    placeholder="添加第几行" 
                    style="width: 86px;"
                    />行 
            </div>
            <div style="display: inline-block;margin: 0px 15px;">
                <Button 
                    size="small"
                    @click="handleDeleteLine"
                    >
                    删除
                </Button>第<Input 
                    v-model="deleteLine"
                    size="small" 
                    placeholder="删除第几行" 
                    style="width: 86px;"
                    />行 
            </div>
            <div style="display: inline-block;margin: 0px 15px;">
                <Button 
                    size="small"
                    @click="handleAddColumn"
                    >
                    插入
                </Button>第<Input 
                    v-model="addColumn"
                    size="small" 
                    placeholder="添加第几列" 
                    style="width: 86px;"
                    />列 
            </div>
            <div style="display: inline-block;margin: 0px 15px;">
                <Button 
                    size="small"
                    @click="handleDeleteColumn"
                    >
                    删除
                </Button>第<Input 
                    v-model="deleteColumn"
                    size="small" 
                    placeholder="删除第几列" 
                    style="width: 86px;"
                    />列 
            </div>
        </div>
        <div style="display: flex;align-items: center;justify-content: space-between;">
            <Goban
                :max-width="maxSize"
                :max-height="maxSize"
                :animate="true"
                :busy="isBusy"
                :range-x="showCorner ? [8, 18] : undefined"
                :range-y="showCorner ? [12, 18] : undefined"
                :coord-x="alternateCoordinates ? chineseCoordx : undefined"
                :coord-y="alternateCoordinates ? chineseCoordy : undefined"
                :sign-map="signMap"
                :show-coordinates="showCoordinates"
                :fuzzy-stone-placement="fuzzyStonePlacement"
                :animate-stone-placement="animateStonePlacement"
                :paint-map="showPaintMap ? paintMap : undefined"
                :heat-map="showHeatMap ? heatMap : undefined"
                :marker-map="showMarkerMap ? markerMap : undefined"
                :ghost-stone-map="showGhostStones ? ghostStoneMap : undefined"
                :lines="showLines ? [
                    {type: 'line', v1: [15, 6], v2: [12, 15]},
                    {type: 'arrow', v1: [10, 4], v2: [5, 7]}
                ] : []"
                :dimmed-map="showDimmedStones ? dimmedMap : undefined"
                :selected-map="showSelection ? selectedMap : undefined"
                @click="onVertexClick"
                @rightClick="onRightClick"
                />

            <img 
                :src="goImgUrl"
                style="width: 480px;"
                >
            
            <Goban
                :max-width="maxSize"
                :max-height="maxSize"
                :animate="true"
                :busy="isBusy"
                :range-x="showCorner ? [8, 18] : undefined"
                :range-y="showCorner ? [12, 18] : undefined"
                :coord-x="alternateCoordinates ? chineseCoordx : undefined"
                :coord-y="alternateCoordinates ? chineseCoordy : undefined"
                :sign-map="signMapTwo"
                :show-coordinates="showCoordinates"
                :fuzzy-stone-placement="fuzzyStonePlacement"
                :animate-stone-placement="animateStonePlacement"
                :paint-map="showPaintMap ? paintMap : undefined"
                :heat-map="showHeatMap ? heatMap : undefined"
                :marker-map="showMarkerMap ? markerMap : undefined"
                :ghost-stone-map="showGhostStones ? ghostStoneMap : undefined"
                :lines="showLines ? [
                    {type: 'line', v1: [15, 6], v2: [12, 15]},
                    {type: 'arrow', v1: [10, 4], v2: [5, 7]}
                ] : []"
                :dimmed-map="showDimmedStones ? dimmedMap : undefined"
                :selected-map="showSelection ? selectedMap : undefined"
                @click="onVertexClick"
                />
        </div>
        <Button @click="copyGoData">
            保存
        </Button>
    </section>
</div>
</template>

<script>
import Goban from '../src/components/Shudan';

const chineseCoordx = [
    '一', '二', '三', '四', '五', '六', '七', '八', '九', '十',
    '十一', '十二', '十三', '十四', '十五', '十六', '十七', '十八', '十九'
];

const chineseCoordy = [...Array(19)].map((_, i) => i + 1);

const rawSignMap = [
    [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
    [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
    [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
    [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
    [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
    [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
    [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
    [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
    [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
    [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
    [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
    [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
    [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
    [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
    [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
    [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
    [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
    [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
    [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
];
/*
const rawSignMap = [
    [0, 0, 0, -1, -1, -1, 1, 0, 1, 1, -1, -1, 0, -1, 0, -1, -1, 1, 0],
    [0, 0, -1, 0, -1, 1, 1, 1, 0, 1, -1, 0, -1, -1, -1, -1, 1, 1, 0],
    [0, 0, -1, -1, -1, 1, 1, 0, 0, 1, 1, -1, -1, 1, -1, 1, 0, 1, 0],
    [0, 0, 0, 0, -1, -1, 1, 0, 1, -1, 1, 1, 1, 1, 1, 0, 1, 0, 0],
    [0, 0, 0, 0, -1, 0, -1, 1, 0, 0, 1, 1, 0, 0, 0, 1, 1, 1, 0],
    [0, 0, -1, 0, 0, -1, -1, 1, 0, -1, -1, 1, -1, -1, 0, 1, 0, 0, 1],
    [0, 0, 0, -1, -1, 1, 1, 1, 1, 1, 1, 1, 1, -1, -1, -1, 1, 1, 1],
    [0, 0, -1, 1, 1, 0, 1, -1, -1, 1, 0, 1, -1, 0, 1, -1, -1, -1, 1],
    [0, 0, -1, -1, 1, 1, 1, 0, -1, 1, -1, -1, 0, -1, -1, 1, 1, 1, 1],
    [0, 0, -1, 1, 1, -1, -1, -1, -1, 1, 1, 1, -1, -1, -1, -1, 1, -1, -1],
    [-1, -1, -1, -1, 1, 1, 1, -1, 0, -1, 1, -1, -1, 0, -1, 1, 1, -1, 0],
    [-1, 1, -1, 0, -1, -1, -1, -1, -1, -1, 1, -1, 0, -1, -1, 1, -1, 0, -1],
    [1, 1, 1, 1, -1, 1, 1, 1, -1, 1, 0, 1, -1, 0, -1, 1, -1, -1, 0],
    [0, 1, -1, 1, 1, -1, -1, 1, -1, 1, 1, 1, -1, 1, -1, 1, 1, -1, 1],
    [0, 0, -1, 1, 0, 0, 1, 1, -1, -1, 0, 1, -1, 1, -1, 1, -1, 0, -1],
    [0, 0, 1, 0, 1, 0, 1, 1, 1, -1, -1, 1, -1, -1, 1, -1, -1, -1, 0],
    [0, 0, 0, 0, 1, 1, 0, 1, -1, 0, -1, -1, 1, 1, 1, 1, -1, -1, -1],
    [0, 0, 1, 1, -1, 1, 1, -1, 0, -1, -1, 1, 1, 1, 1, 0, 1, -1, 1],
    [0, 0, 0, 1, -1, -1, -1, -1, -1, 0, -1, -1, 1, 1, 0, 1, 1, 1, 0]
];
*/
/* 
signMap = [ [ 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], 
            [ 0, -1, 1, -1, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], 
            [ 0, -1, 1, 1, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], 
            [ 0, 0, -1, -1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0], 
            [ 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], 
            [ 0, 0, 0, 0, -1, 0, 0, 0, 0, 0, 0, 0, -1, 0, 0, 1, -1, 0, 0], 
            [ 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, -1, 1, -1, 1, 0, 0, 0], 
            [ 0, -1, -1, -1, 0, 0, 0, 0, -1, 0, -1, -1, 1, 1, 0, 1, 0, 0, 0], 
            [ 0, 1, 1, 1, -1, 1, 1, 0, 0, -1, -1, 1, 1, 0, -1, 1, 0, 0, 0], 
            [ 0, 1, 0, -1, 0, 1, -1, -1, -1, 1, 1, -1, 1, -1, 0, -1, -1, 0, 0], 
            [ 0, -1, 1, 1, 1, 1, 0, 0, 1, 1, 1, -1, -1, 1, 1, -1, 1, 0, 0], 
            [ 0, -1, 0, 0, -1, 1, -1, -1, 1, 1, -1, -1, 0, 0, 0, 0, 0, 0, 0], 
            [ 0, -1, 1, 1, -1, 1, 1, -1, 1, 0, 1, -1, 0, 0, 1, 0, -1, 0, 0], 
            [-1, -1, -1, -1, -1, -1, 1, -1, -1, 1, 1, 0, -1, 0, 1, -1, 0, 0, 0], 
            [-1, 1, 1, 1, -1, 1, -1, -1, 0, -1, 1, -1, 1, -1, 1, 0, 0, 0, 0], 
            [ 1, -1, -1, 1, 1, 1, 1, 1, 0, -1, 1, 1, 0, 1, 1, -1, 0, 0, 0], 
            [ 0, -1, 1, 0, 1, 0, 1, -1, 0, -1, 1, 1, 1, -1, -1, 0, -1, 0, 0], 
            [ 0, -1, 1, 1, 1, -1, 1, -1, 0, 0, 0, 0, -1, 0, 0, -1, 0, 0, 0], 
            [-1, 0, -1, 0, 0, -1, -1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0] ];
 */

const paintMap = [
    [-1, -1, -1, -1, -1, -1, 1, 1, 1, 1, -1, -1, -1, -1, -1, -1, -1, 1, 1],
    [-1, -1, -1, -1, -1, 1, 1, 1, 1, 1, -1, -1, -1, -1, -1, -1, 1, 1, 1],
    [-1, -1, -1, -1, -1, 1, 1, 1, 1, 1, 1, -1, -1, 1, -1, 1, 1, 1, 1],
    [-1, -1, -1, -1, -1, -1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1],
    [-1, -1, -1, -1, -1, -1, -1, 1, 1, 1, 1, 1, 0, 0, 0, 1, 1, 1, 1],
    [-1, -1, -1, -1, -1, -1, -1, 1, 1, 1, 1, 1, -1, -1, 0, 1, 1, 1, 1],
    [-1, -1, -1, -1, -1, 1, 1, 1, 1, 1, 1, 1, 1, -1, -1, -1, 1, 1, 1],
    [-1, -1, -1, 1, 1, 1, 1, -1, -1, 1, 0, 1, -1, -1, -1, -1, -1, -1, 1],
    [-1, -1, -1, -1, 1, 1, 1, 0, -1, 1, -1, -1, -1, -1, -1, 1, 1, 1, 1],
    [-1, -1, -1, 1, 1, -1, -1, -1, -1, 1, 1, 1, -1, -1, -1, -1, 1, -1, -1],
    [-1, -1, -1, -1, 1, 1, 1, -1, -1, -1, 1, -1, -1, -1, -1, 1, 1, -1, -1],
    [-1, 1, -1, 0, -1, -1, -1, -1, -1, -1, 1, -1, -1, -1, -1, 1, -1, -1, -1],
    [1, 1, 1, 1, -1, 1, 1, 1, -1, 1, 1, 1, -1, -1, -1, 1, -1, -1, -1],
    [1, 1, 1, 1, 1, 1, 1, 1, -1, 1, 1, 1, -1, -1, -1, 1, 1, -1, -1],
    [1, 1, 1, 1, 1, 1, 1, 1, -1, -1, 0, 1, -1, -1, -1, 1, -1, -1, -1],
    [1, 1, 1, 1, 1, 1, 1, 1, 1, -1, -1, 1, -1, -1, 1, -1, -1, -1, -1],
    [1, 1, 1, 1, 1, 1, 1, 1, -1, -1, -1, -1, 1, 1, 1, 1, -1, -1, -1],
    [1, 1, 1, 1, -1, 1, 1, -1, -1, -1, -1, 1, 1, 1, 1, 1, 1, -1, 1],
    [1, 1, 1, 1, -1, -1, -1, -1, -1, -1, -1, -1, 1, 1, 1, 1, 1, 1, 1]
];

const heatMap = (() => {
    let _ = null;
    let O = (strength, text) => ({ strength, text });

    return [
        [_, _, _, _, _, _, _, _, _, _, _, _, _, _, _, _, _, _, _],
        [_, _, _, _, _, _, _, _, _, _, _, _, _, _, _, _, _, _, _],
        [_, _, _, _, _, _, _, _, _, _, _, _, _, _, _, _, _, _, _],
        [_, _, _, _, _, _, _, _, _, _, _, _, _, _, _, _, _, _, _],
        [_, _, _, _, _, _, _, _, _, _, _, _, _, O(7), O(9, '80%\n13.5k'), _, _, _, _],
        [_, _, _, _, _, _, _, _, _, _, _, _, _, _, O(3), _, _, _, _],
        [_, _, _, _, _, _, _, _, _, _, _, _, _, _, _, _, _, _, _],
        [_, _, _, _, _, _, _, _, _, _, _, _, _, _, _, _, _, _, _],
        [_, _, _, _, _, _, _, _, _, _, _, _, _, _, _, _, _, _, _],
        [_, _, _, _, _, _, _, _, _, _, _, _, _, _, _, _, _, _, _],
        [_, _, _, _, _, _, _, _, _, _, _, _, _, _, _, _, _, _, _],
        [_, _, _, _, _, _, _, _, _, _, _, _, _, _, _, _, _, _, _],
        [_, _, _, _, _, _, _, _, _, _, _, _, _, O(2), _, _, _, _, _],
        [_, _, _, _, _, _, _, _, _, _, _, _, _, _, _, _, _, _, _],
        [_, _, _, _, _, _, _, _, _, _, _, _, _, _, _, _, _, _, _],
        [_, O(1, '20%\n111'), _, _, _, _, _, _, _, _, _, _, _, _, _, _, _, _, _],
        [_, O(5, '67%\n2315'), O(4), _, _, _, _, _, _, _, _, _, _, _, _, _, _, _, _],
        [_, _, _, _, _, _, _, _, _, _, _, _, _, _, _, _, _, _, _],
        [_, _, _, _, _, _, _, _, _, _, _, _, _, _, _, _, _, _, _]
    ];
})();

const markerMap = (() => {
    let _ = null;
    let O = { type: 'circle' };
    let X = { type: 'cross' };
    let T = { type: 'triangle' };
    let Q = { type: 'square' };
    let $ = { type: 'point' };
    let S = { type: 'loader' };
    let L = label => ({ type: 'label', label });
    let A = L('a');
    let B = L('b');
    let C = L('c');

    return [
        [_, _, _, _, _, _, _, _, _, _, _, _, _, _, _, _, _, _, _],
        [_, _, _, O, O, O, _, _, _, _, _, _, _, _, _, _, _, _, _],
        [_, _, _, _, _, _, _, _, _, X, _, _, _, _, _, _, _, _, _],
        [_, _, _, _, _, _, _, _, _, X, _, _, _, _, _, _, _, _, _],
        [_, _, _, _, _, _, _, _, _, X, _, _, _, _, _, _, _, _, _],
        [_, _, _, _, _, _, _, _, _, _, _, _, _, _, _, _, _, _, _],
        [_, _, _, _, _, _, _, _, _, _, _, _, _, _, _, _, _, _, _],
        [_, _, _, _, _, _, _, _, _, _, _, _, _, T, T, T, _, _, _],
        [_, _, _, _, _, _, _, _, _, _, _, _, _, _, _, _, _, _, _],
        [_, _, _, _, _, _, _, _, _, _, _, _, _, _, _, _, _, _, _],
        [_, _, _, _, _, _, _, _, _, _, _, _, _, _, _, _, _, _, _],
        [_, $, $, $, _, _, _, _, _, _, _, _, _, _, _, S, S, S, _],
        [_, _, _, _, _, _, _, _, _, _, _, _, _, _, _, _, _, _, _],
        [_, _, _, _, _, _, _, _, _, _, _, _, _, _, _, _, _, _, _],
        [_, _, _, _, _, _, _, _, _, _, _, _, _, _, _, _, _, _, _],
        [_, _, _, _, _, _, _, _, Q, _, _, _, _, _, _, _, _, _, L('Long\nlabel with linebreak')],
        [_, _, _, _, _, _, _, _, Q, _, _, _, _, _, _, _, _, _, C],
        [_, _, _, _, _, _, _, _, Q, _, _, _, _, _, _, _, _, _, B],
        [_, _, _, _, _, _, _, _, _, _, _, _, _, _, _, _, _, _, A]
    ];
})();

const ghostStoneMap = (() => {
    let _ = null;
    let O = t => ({ sign: -1, type: t });
    let X = t => ({ sign: 1, type: t });
    let o = t => ({ sign: -1, type: t, faint: true });
    let x = t => ({ sign: 1, type: t, faint: true });

    return [
        [X(), x(), _, _, _, _, _, _, _, _, _, _, _, _, _, _, _, _, _],
        [O(), o(), _, _, _, _, _, _, _, _, _, _, _, _, _, _, _, _, _],
        [X('good'), x('good'), _, _, _, _, _, _, _, _, _, _, _, _, _, _, _, _, _],
        [X('interesting'), x('interesting'), _, _, _, _, _, _, _, _, _, _, _, _, _, _, _, _, _],
        [X('doubtful'), x('doubtful'), _, _, _, _, _, _, _, _, _, _, _, _, _, _, _, _, _],
        [X('bad'), x('bad'), _, _, _, _, _, _, _, _, _, _, _, _, _, _, _, _, _],
        [_, _, _, _, _, _, _, _, _, _, _, _, _, _, _, _, _, _, _],
        [_, _, _, _, _, _, _, _, _, _, _, _, _, _, _, _, _, _, _],
        [_, _, _, _, _, _, _, _, _, _, _, _, _, _, _, _, _, _, _],
        [_, _, _, _, _, _, _, _, _, _, _, _, _, _, _, _, _, _, _],
        [_, _, _, _, _, _, _, _, _, _, _, _, _, _, _, _, _, _, _],
        [_, _, _, _, _, _, _, _, _, _, _, _, _, _, _, _, _, _, _],
        [_, _, _, _, _, _, _, _, _, _, _, _, _, _, _, _, _, _, _],
        [_, _, _, _, _, _, _, _, _, _, _, _, _, _, _, _, _, _, _],
        [_, _, _, _, _, _, _, _, _, _, _, _, _, _, _, _, _, _, _],
        [_, _, _, _, _, _, _, _, _, _, _, _, _, _, _, _, _, _, _],
        [_, _, _, _, _, _, _, _, _, _, _, _, _, _, _, _, _, _, _],
        [_, _, _, _, _, _, _, _, _, _, _, _, _, _, _, _, _, _, _],
        [_, _, _, _, _, _, _, _, _, _, _, _, _, _, _, _, _, _, _]
    ];
})();

const dimmedMap = new Array();
for (let i = 0; i < 19; i++) {
    dimmedMap[i] = new Array(19).fill(false);
}
[[2, 14], [2, 13], [5, 13], [6, 13], [9, 3], [9, 5],
 [10, 5], [14, 7], [13, 13], [13, 14], [18, 13]].forEach(([x, y]) => {
     dimmedMap[y][x] = true;
 });

let selectedMap = new Array();
for (let i = 0; i < 19; i++) {
    selectedMap[i] = new Array(19).fill(false);
}
[[9, 7], [9, 8], [10, 7], [10, 8]].forEach(([x, y]) => {
    selectedMap[y][x] = true;
});

export default {
    name: 'App',
    components: {
        Goban
    },

    data: function () {
        return {
            signMap: JSON.parse(JSON.stringify(rawSignMap)),
            signMapTwo: JSON.parse(JSON.stringify(rawSignMap)),
            maxSize: 480,
            showCoordinates: false,
            alternateCoordinates: false,
            showCorner: false,
            showDimmedStones: false,
            fuzzyStonePlacement: false,
            animateStonePlacement: false,
            showPaintMap: false,
            showHeatMap: false,
            showMarkerMap: false,
            showGhostStones: false,
            showLines: false,
            showSelection: false,
            isBusy: false,

            rawSignMap,
            chineseCoordx,
            chineseCoordy,
            paintMap,
            heatMap,
            markerMap,
            ghostStoneMap,
            dimmedMap,
            selectedMap,
            checkedNames: [],

            // actionUrl: 'https://jsonplaceholder.typicode.com/posts/',
            actionUrl: 'http://127.0.0.1:5000/img/upload',
            goImgUrl: "",
            activeModule: 0,
            dataList: [[],[]],
            selectedItem: {},
            addLine: null,
            deleteLine: null,
            addColumn: null,
            deleteColumn: null
        };
    },
    created() {
        let _this = this;
        this.$http.get('http://127.0.0.1:5000/datas').then(function (res){
            console.log(res.data);
            _this.$set(_this.dataList, 0, res.data.ng);
            _this.$set(_this.dataList, 1, res.data.ok);
        });
    },
    mounted() {
        /*
        let _this = this;
        this.$http.get('http://127.0.0.1:5000/get-chess', {
            params:{
                path:'C:/Users/admin/Desktop/python-space/GoChessRecognition/docs/10061.jpg'
            }
        }).then(function (res){
            console.log(res.data);
            _this.rawSignMap = res.data;
            _this.signMap = res.data;
        });
        */

        // this.uploadList = this.$refs.upload.fileList;
    },

    methods: {
        onVertexClick: function (offsetX, offsetY) {
            // let aConstMap = {'-1': 1, '0': Math.sign(Math.random() - 0.5) || 1, '1': -1};
            let aConstMap = {'-1': 1, '0': 1, '1': -1};
            console.log(offsetX, offsetY);
            let signMap = JSON.parse(JSON.stringify(this.signMap));
            // signMap[offsetX][offsetY] = Math.sign(Math.random() - 0.5) || 1;
            signMap[offsetX][offsetY] = aConstMap[signMap[offsetX][offsetY]];
            this.signMap = signMap;
        },
        onRightClick: function (offsetX, offsetY) {
            console.log(offsetX, offsetY);
            let signMap = JSON.parse(JSON.stringify(this.signMap));
            /*
            signMap[offsetX][offsetY] = signMap[offsetX][offsetY] + 1;
            signMap[offsetX][offsetY] = signMap[offsetX][offsetY] > 1 ? -1 : signMap[offsetX][offsetY];
            */
            signMap[offsetX][offsetY] = 0;
            this.signMap = signMap;
        },
        imgUploadHandleSuccess(res, file) {
            console.log(file);
            this.rawSignMap = res.go_data;
            this.signMap = res.go_data;
            this.goImgUrl = res.base64_data;
        },
        handleView(file) {
            this.goImgUrl = file.response.base64_data;
        },
        handleRemove(file) {
            const fileList = this.$refs.upload.fileList;
            this.$refs.upload.fileList.splice(fileList.indexOf(file), 1);
        },
        handleSelectView(item) {
            let _this = this;
            const typeArr = ['ng', 'ok'];
            this.$http.get('http://127.0.0.1:5000/getAnnotation?type=' + typeArr[this.activeModule] + '&filename=' + item.name).then(function (res){
                console.log(res.data);
                _this.signMap = res.data;
                _this.goImgUrl = item.base64;
                _this.selectedItem = item;
            });
        },
        handleAddLine() {
            this.signMap.splice(this.addLine, 0, [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]);
        },
        handleDeleteLine() {
            this.signMap.splice(this.deleteLine - 1, 1);
        },
        handleAddColumn() {
            const aamap = {'A': 0, 'B': 1, 'C': 2, 'D': 3, 'E': 4, 'F': 5, 'G': 6, 'H': 7, 'J': 8, 'K': 9, 'L': 10, 'M': 11, 'N': 12, 'O': 13, 'P': 14, 'Q': 15, 'R': 16, 'S': 17, 'T': 18, 'U': 19, 'V': 20, 'W': 21, 'X': 22, 'Y': 23, 'Z': 24};
            let addIndex = this.addColumn;
            var reg= /^[A-Za-z]/;
            if (reg.test(this.addColumn)){
                this.addColumn = this.addColumn.toUpperCase();
                addIndex = aamap[this.addColumn] + 1;
            }
            for (let index in this.signMap) {
                let line = this.signMap[index];
                line.splice(addIndex, 0, 0);
            }
        },
        handleDeleteColumn() {
            const aamap = {'A': 0, 'B': 1, 'C': 2, 'D': 3, 'E': 4, 'F': 5, 'G': 6, 'H': 7, 'J': 8, 'K': 9, 'L': 10, 'M': 11, 'N': 12, 'O': 13, 'P': 14, 'Q': 15, 'R': 16, 'S': 17, 'T': 18, 'U': 19, 'V': 20, 'W': 21, 'X': 22, 'Y': 23, 'Z': 24};
            let deleteIndex = this.deleteColumn;
            var reg= /^[A-Za-z]/;
            if (reg.test(this.deleteColumn)){
                this.deleteColumn = this.deleteColumn.toUpperCase();
                deleteIndex = aamap[this.deleteColumn] + 1;
            }
            for (let index in this.signMap) {
                let line = this.signMap[index];
                line.splice(deleteIndex - 1, 1);
            }
        },
        copyGoData() {
            let goData = JSON.stringify(this.signMap);
            // goData = goData.replace(/,/g, ', ');
            // goData = goData.replace(/], /g, '],\n');
            goData = goData.replace(/],/g, ']\n');
            goData = goData.replace(/,/g, '  ');
            goData = goData.replace(/\[/g, ' [ ');
            goData = goData.replace(/ \[ {2}\[/g, '[[');
            goData = goData.replace(/ -1/g, '-1');
            
            console.log(goData, this.selectedItem.name, this.activeModule);
            console.log(goData.length);
            console.log(goData.split("\n").length - 1);

            // let _this = this;
            if (goData.length != 1140 || (goData.split("\n").length - 1) != 18) {
                this.$Message.error('棋盘形状异常，请检查！');
            } else {
                const typeArr = ['ng', 'ok'];
                this.$http.get('http://127.0.0.1:5000/save?type=' + typeArr[this.activeModule] + '&filename=' + this.selectedItem.name + '&goData=' + goData).then(function (res){
                    console.log(res.data);
                    this.$Message.success('保存成功：' + res.data);
                    if (this.activeModule == 0) {
                        this.dataList[0].splice(this.dataList[0].indexOf(this.selectedItem), 1);
                        this.dataList[1].push(this.selectedItem);
                    }
                });
            }
        }
    },

    computed: {
        checkBoxs: function () {
            return [
                { stateKey: 'showCoordinates', text: 'Show coordinates' },
                { stateKey: 'alternateCoordinates', text: 'Alternate coordinates' },
                { stateKey: 'showCorner', text: 'Show lower right corner only' },
                { stateKey: 'showDimmedStones', text: 'Dim dead stones' },
                { stateKey: 'fuzzyStonePlacement', text: 'Fuzzy stone placement' },
                { stateKey: 'animateStonePlacement', text: 'Animate stone placement' },
                { stateKey: 'showMarkerMap', text: 'Show markers' },
                { stateKey: 'showGhostStones', text: 'Show ghost stones' },
                { stateKey: 'showPaintMap', text: 'Show paint map' },
                { stateKey: 'showHeatMap', text: 'Show heat map' },
                { stateKey: 'showLines', text: 'Show lines' },
                { stateKey: 'showSelection', text: 'Show selection' },
                { stateKey: 'isBusy', text: 'Busy' }
            ];
        },
        uploadList() {
            return this.dataList[this.activeModule];
        }
    },

    watch: {
        checkedNames: function () {
            let { checkBoxs, checkedNames } = this;
            checkBoxs.map((value) => {
                let { stateKey } = value;
                let newState = checkedNames.indexOf(stateKey) > -1 ? true : false;
                if (this[stateKey] != newState)
                    this[stateKey] = newState;
            });
        }
    }
};
</script>


<style>
body {
    font-family: "Segoe UI", Ubuntu, Helvetica, Arial, sans-serif;
}
.demo-upload-list{
    display: inline-block;
    width: 60px;
    height: 60px;
    text-align: center;
    line-height: 60px;
    border: 1px solid transparent;
    border-radius: 4px;
    overflow: hidden;
    background: #fff;
    position: relative;
    box-shadow: 0 1px 1px rgba(0,0,0,.2);
    margin-right: 4px;
}
.demo-upload-list img{
    width: 100%;
    height: 100%;
}
.demo-upload-list-cover{
    display: none;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(0,0,0,.6);
}
.demo-upload-list:hover .demo-upload-list-cover{
    display: block;
}
.demo-upload-list-cover i{
    color: #fff;
    font-size: 20px;
    cursor: pointer;
    margin: 0 2px;
}
</style>
